<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace  ="/public/head :: head"></head>

<style>
.statistics{
    width: 100%;
}
.statistics-daily{
    width: 100%;
    display: flex;
}
.statistics-daily .one{
    width: 100%;
}
.statistics-daily .one .data  .title2{
    color: #cccccc;
    font-size: 15px;
}
.statistics-daily .one .data  p{
    margin-top: 10px;
    font-size:30px;
    text-align: center;
}
.statistics-daily .one .data{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}
.title{
    font-size: 20px;
}
#echart-tool{
   width: 100%;
   height:400px;
   color:#1aad19;
    display: flex;
    align-items: center;
    justify-content: center;
}
#echart-tool .layui-icon{
    font-size: 100px;
}
</style>
<body>
<nav th:replace="/public/head::nav"></nav>

<div class="container-box">
    <aside th:replace="/public/aside::aside"></aside>

    <section>
        <script src="/static/tzss-js/echarts.min.js"></script>
        <div class="section">
            <div class="statistics-daily border-section">
                <div class="one">
                    <p class="title">昨日概括</p>
                    <div class="data">
                     <div>
                        <p class="title2">访问人数</p>
                        <p class="user_info_val">...</p>
                     </div>
                     <div>
                        <p class="title2">新增用户</p>
                        <p class="user_info_val">...</p>
                     </div>
                        <div>
                            <p class="title2">打开次数</p>
                            <p class="user_info_val">...</p>
                        </div>
                        <div>
                            <p class="title2">访问次数</p>
                            <p class="user_info_val">...</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="statistics border-section">
                 <p class="title">最近30天用户统计</p>
                 <!--加载中..-->
                 <div id="echart-tool">
                     <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                 </div>
                 <div id="echart" style="margin: 0 auto;width: 1000px;height:400px;display:none;">

                 </div>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart'),"vintage");

    //获取统计信息
    $.ajax({
        url:"/wxapp/statistics_user_info",
        success:function(res){
            console.log(res);

            let xAxisData = [];
            let seriesData = [];
            let share_pv = [];
            let share_uv = [];

            let monthStatistic = res[0];

            monthStatistic.forEach((val,index)=>{
                try{//这里可能最后一天(第二天早上 9点左右) 微信接口调用错误
                    xAxisData.push(val.list[0].ref_date.substr(4,2)+"-"+val.list[0].ref_date.substr(6,2));
                    seriesData.push(val.list[0].visit_total);
                    share_uv.push(val.list[0].share_uv);
                    share_pv.push(val.list[0].share_pv);
                }catch (e) {
                    console.log(e);
                }

            })


            $("#echart").css({
                "display":"block"
            })
            $("#echart-tool").css({
                "display":"none"
            })
            myChart.setOption({
                color: [' #1aad19'],
                legend: {
                    data:['累计用户数',"转发人数","转发次数"]
                },
                yAxis: {
                    type: 'value'
                },
                series:[{
                    name:'累计用户数',
                    type: 'line',
                    data:seriesData
                  },{
                    name:'转发人数',
                    type: 'line',
                    data:share_pv,
                    color:["#f39836"]
                  },{
                    name:'转发次数',
                    type: 'line',
                    data:share_uv,
                    color:["#6792f3"]
                 }
                ],
                xAxis:[{
                    type: 'category',
                    data:xAxisData
                }]
            })
            $(".user_info_val:eq(0)").text(res[1].list[0].visit_uv);
            $(".user_info_val:eq(1)").text(res[1].list[0].visit_uv_new);
            $(".user_info_val:eq(2)").text(res[1].list[0].session_cnt);
            $(".user_info_val:eq(3)").text(res[1].list[0].visit_pv);
        }
    })
</script>

</body>
</html>